
import { mapActions } from 'vuex';
import { mapState } from 'vuex';
import { mapState } from 'vuex';
import { mapActions } from 'vuex';


<template>
  <div class="container">
    <div :style="{borderTopLeftRadius: windowBorderRadius, borderTopRightRadius: windowBorderRadius}" id="header">
      <template v-if="isDesktopPlatform">
        <div :style="windowControlButtonStyles" class="window-controller" id="close"></div>
        <div :style="windowControlButtonStyles"  class="window-controller" id="maximize"></div>
        <div :style="windowControlButtonStyles"  class="window-controller" id="minimize"></div>
      </template>
      <p id="title" :style="{marginLeft: titleMargin}">باھار كۆپ تىللىق تور لۇغىتى</p>
    </div>
    <div id="content">
      <Card id="user-panel">
        <div id="avatar" slot="title">
          <div style="height: 200px" slot="title">
            <img src="static/pictures/boy.svg" id="avatar-image">
            <ButtonGroup shape="circle" style="margin-top: 20px;">
              <template v-if="isLogined">
                <Button style="width: 160px; background-color: rgb(255, 147, 147); color: white;" @click="SignOut()">چىكىنىش</Button>
              </template>
              <template v-else>
                <Button style="width: 80px;" @click="goTo('SignUp')">تىزىملىتىش</Button>
                <Button style="width: 80px;" @click="goTo('SignIn')">كىرىش</Button>
              </template>
            </ButtonGroup>
          </div>
        </div>
        <div id="actions">
          <template v-for="action in divideredActions">
            <router-link v-if="action.isDivider == false" :to="action.link" :key="action.link">
              <div class="action-item" :class="{selected: action.link == currentPath()}">
                <Icon :type="action.icon" size="24" style="margin-left: 15px;" />
                {{ action.name }}
              </div>
            </router-link>
            <div v-else :key="action.link" class="divider"></div>
          </template>
          
        </div>

      </Card>
      <div id="inner-content">
        <keep-alive>
          <router-view id="router-view"></router-view>
        </keep-alive>
      </div>
    </div>
    <div id="footer" :style="{borderBottomLeftRadius: windowBorderRadius, borderBottomRightRadius: windowBorderRadius}">2018-09 شىنجاڭ تۇغلۇق تور پەن-تېخنىكىسى</div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  display: flex;
  flex-direction: column;
  direction: rtl;

  background-color: transparent;
}

$header-height: 40px;
$header-color: #3BA776;
// $header-color: white;

#header {
  height: $header-height;
  line-height: $header-height;
  background-color: $header-color;
  color: white;

  /*For begin electron*/
  -webkit-app-region: drag;
  /*For end electron*/

  border-bottom: solid 1px rgb(230, 230, 230);

  display: flex;
  flex-direction: row-reverse;
}
.window-controller {
  border-radius: 20px;

  margin: auto;

  /*Begin for electron*/
  -webkit-app-region: no-drag;
  /*End for electron*/
}

#close {
  background-color: rgb(255, 96, 96);
}
#maximize {
  background-color: rgb(106, 255, 188);
}
#minimize {
  background-color: rgb(255, 196, 0);
}

#title {
  font-family: "ukij-bom";
  text-align: center;
  font-size: 16px;
  flex-grow: 1;
}

#content {
  flex-grow: 1;

  display: flex;
  flex-direction: row;
}

#footer {
  height: $header-height;
  line-height: $header-height;
  background-color: $header-color;
  color: white;

  font-family: "ukij-bom";
  text-align: center;
  font-size: 16px;

  /*For begin electron*/
  -webkit-app-region: drag;
  /*For end electron*/

  border: {
    bottom-right: {
      radius: 18px;
    }
    bottom-left: {
      radius: 18px;
    }
  }
}

#user-panel {
  display: flex;
  width: 300px;
  // background-color: orange;
  flex-direction: column;
  text-align: center;

  overflow-y: auto;
}
#avatar-image {
  border: {
    radius: 100px;
    color: rgb(230, 230, 230);
    width: 1px;
    style: solid;
  }

  width: 140px;
}
#actions {
  padding: 10px;
}

$action-item-height: 50px;
.action-item {
  height: $action-item-height;
  width: 100%;
  line-height: $action-item-height;

  color: rgb(116, 116, 116);

  text-align: start;
}

.divider {
  width: 100%;
  height: 1px;
  background-color:  rgb(245, 245, 245);;
}

#inner-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

$navigation-height: 100px;

#router-view {
  flex-grow: 1;
  // border: {
  //   top: {
  //     style: solid;
  //     width: 1px;
  //     color: rgb(235, 235, 235);
  //   }
  // }
}

.selected {
  border-left: {
    color: #3BA776;
    style: solid;
    width: 2px;
  }
}

</style>

<script>
export default {
  
}
</script>

<style lang="scss">
@import "./theme/fonts.scss";
@import "./theme/iview-rtl/index.scss";

@font-face {
    font-family: "ukij-bom";
    src: url("assets/fonts/UKIJBom.ttf");
}
@font-face {
  font-family: "ukij";
  src: url("assets/fonts/UKIJCJK.ttf");
}

* {
  font-family: "ukij";
  transition: all 0.4s;
}

</style>


<script>
import {mapActions, mapState} from "vuex"



export default {
  data (){
    return {
      
    }
  },
  methods: {
    goTo(page){
      this.$router.push({
        name: page
      })
    },
    currentPath(){
      return this.$router.history.current.path
    },
    ...mapActions({
      SignOut: "Account/SignOut"
    }),
  },
  computed: {
    actions(){
      return [
        {name: "يىقىنقى ئاكتىپ ھەركەتلەر", link: "/Activates", icon: "ios-magnet", isDivider: false},
        {name: "باش بەت", link: "/", icon: "ios-search", isDivider: false},
        {name: "يىغىپ ساقلىغۇچ", link: "/Favorites", icon: "ios-star", isDivider: false},
        {name: "سۆزلۈك باشقۇرۇش", link: "/MyWords", icon: "ios-book", isDivider: false},
        {name: "ئەزا مەركىزى", link: "/UserCenter", icon: "ios-contact", isDivider: false},
        {name: "لۇغەتنى چۈشۈرۋىلىڭ", link: "/Downloads", icon: "md-cloud-download", isDivider: false},
        {name: "ھەققىدە", link: "/About", icon: "ios-information-circle-outline", isDivider: false},
      ]
    },
    divideredActions(){
      let newActions = []
      for (let i = 0; i < this.actions.length; i++){
        newActions.push(this.actions[i])

        if (i != this.actions.length - 1){
          newActions.push({isDivider: true})
        }
      }
      return newActions
    },
    ...mapState({
      isLogined: state => state.Account.isLogined,
      isDesktopPlatform: state => state.Platform.platform == "desktop"
    }),
    // titleColor(){
    //   // return this.isDesktopPlatform ? "#747474" : "white"
    //   return "white"
    // },
    windowControlButtonSize(){
      return 20
    },
    windowControlButtonMargin(){
      return 8
    },
    windowControlButtonStyles(){
      return {
        width: this.windowControlButtonSize + "px",
        height: this.windowControlButtonSize + "px",
        marginLeft: this.windowControlButtonMargin + "px"
      }
    },
    titleMargin(){
      return this.isDesktopPlatform ? (-(this.windowControlButtonSize * 3 + this.windowControlButtonMargin * 3)) + "px" : "0px"
    },
    windowBorderRadius(){
      return this.isDesktopPlatform ? "20px" : "0px"
    }
  },
}
</script>
